<template>
  <div class="background-container"></div>
</template>

<script setup lang="ts">
// 不需要额外的 JavaScript
</script>

<style scoped>
/* 设置渐变和星空背景的容器 */
.background-container {
  position: fixed; /* 固定位置 */
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: url('https://cdn.pixabay.com/photo/2021/01/10/18/01/milky-way-5905903_1280.jpg') no-repeat center center fixed; /* 星空背景图片 */
  background-size: cover; /* 确保背景图覆盖整个屏幕 */
  background-blend-mode: overlay; /* 混合背景图像和渐变色 */
  opacity: 1; /* 完全不透明 */
  z-index: -1; /* 让背景层在内容下方 */
  animation: gradientAnimation 20s ease infinite; /* 动态渐变背景动画 */
}
</style>
